import 'package:flutter/material.dart';
import 'package:hi_net/model/video_model.dart';
import 'package:hi_net/util/format_util.dart';
import 'package:hi_net/util/view_util.dart';
import 'package:transparent_image/transparent_image.dart';

import '../navigator/hi_navigator.dart';

///视频卡片
class VideoCard extends StatelessWidget {
  final VideoModel videoModel;

  const VideoCard({super.key, required this.videoModel});

  @override
  Widget build(BuildContext context) {
    return InkWell(
        onTap: () {
          HiNavigator.getInstance.onJumpTo(RouteStatus.detail, args: {"videoModel": videoModel});
        },
        child: SizedBox(
          height: 200,
          child: Card(
            margin: const EdgeInsets.all(4),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(5),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  _itemImage(context),
                  _infoText(),
                ],
              ),
            ),
          ),
        ));
  }

  _itemImage(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Stack(
      children: [
        // FadeInImage.memoryNetwork(
        //     height: 120,
        //     width: (size.width / 2 - 20),
        //     placeholder: kTransparentImage,
        //     image: videoModel.cover,
        //     fit: BoxFit.cover),
        cachedImage(videoModel.cover, height: 120, width: (size.width / 2 - 20)),
        Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              padding: const EdgeInsets.only(left: 8, right: 8, top: 5, bottom: 3),
              decoration: const BoxDecoration(
                  //渐变
                  gradient: LinearGradient(
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                      colors: [Colors.black54, Colors.black12])),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _iconText(Icons.ondemand_video, videoModel.view),
                  _iconText(Icons.favorite_border, videoModel.favorite),
                  _iconText(null, videoModel.duration),
                ],
              ),
            )),
      ],
    );
  }

  _iconText(IconData? iconData, int count) {
    String views = '';
    if (iconData != null) {
      views = countFormat(count);
    } else {
      views = durationTransform(count);
    }
    return Row(
      children: [
        if (iconData != null) Icon(iconData, color: Colors.white, size: 12),
        Padding(
          padding: const EdgeInsets.only(left: 3),
          child: Text(views, style: const TextStyle(color: Colors.white, fontSize: 10)),
        )
      ],
    );
  }

  _infoText() {
    return Expanded(
        child: Container(
      padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Align(
              alignment: Alignment.topLeft,
              child: Text(
                videoModel.title,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(color: Colors.black87, fontSize: 12),
              )),
          _owner()
        ],
      ),
    ));
  }

  _owner() {
    var owner = videoModel.owner;
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: cachedImage(owner.face, height: 24, width: 24),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8),
              child: Text(owner.name, style: const TextStyle(color: Colors.black87, fontSize: 11)),
            )
          ],
        ),
        const Icon(Icons.more_vert_sharp, color: Colors.grey, size: 15)
      ],
    );
  }
}
